<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Sgvizler</title>
    <meta charset="UTF-8"/>
    <link rel="shortcut icon" href="../favicon.ico" />
    <link rel="stylesheet" type="text/css" href="sgvizler.css"/>
    <script type="text/javascript">
      // faking a Sgvizler to make calling examples work: 
      var sgvizler = { home: "http://sws.ifi.uio.no/sgvizler/npd/" };
      sgvizler.example = {};
    </script>
    <script type="text/javascript" src="http://sws.ifi.uio.no/sgvizler/sgvizler.example.js"></script>
  </head>
  <body>
    <div id="main">
      <h1>Sgvizler</h1>

      <div id="menu">
	<a class="internal" href="#what">What is this?!</a> -
	<a class="internal" href="#screenshots">Screenshots</a> -
	<a class="internal" href="#using">Using Sgvizler</a> -
	<a class="internal" href="#designingqueries">Designing Queries</a> -
	<a class="internal" href="#userfunctions">User Functions</a> -
	<a class="internal" href="#download">Download</a> -
	<a class="internal" href="#contact">Contact</a> 
	<br/>
	<div id="logo">
	  <a href="http://code.google.com/p/sgvizler/">
	    <img src="../mr.sgvizler.png" alt="mr.sgvizler.png"/>
	  </a><br/>Mr. Sgvizler
	</div>
      </div>

      <p><b>This is the old homepage of the project. This information
      will be moved
      to <a href="http://code.google.com/p/sgvizler/">http://code.google.com/p/sgvizler/</a>.<br/> Some
      links may be dead.
      </b></p>

      <p>Local sites running Sgvizler:</p>
      <ul>
	<li>
	  <a href="http://sws.ifi.uio.no/sgvizler/npd/">Linked Open NPD FactPages</a>.
	  <a href="http://sws.ifi.uio.no/project/npd/">Project homepage</a>.
	</li>
	<li>
	  <a href="http://sws.ifi.uio.no/sgvizler/gulliste/">Byantikvarens gule liste</a>.
	  <a href="http://sws.ifi.uio.no/gulside/">Prosjektets hjemmeside</a>.
	</li>
      </ul>

      <h2><a id="what">What is this?!</a></h2>
      <p>
	Sgvizler visualizes the result of SPARQL SELECT queries. The
	name and tool relies on and/or is inspired by
	<a href="http://www.w3.org/TR/rdf-sparql-query/">SPARQL</a>,
	<a href="http://code.google.com/apis/chart/">Google
	visualization API</a>,
	<a href="http://www.sparql.org/query.html">SPARQLer</a>,
	<a href="http://dbpedia.org/snorql/">Snorql</a> and
	<a href="http://km.aifb.kit.edu/sites/spark/">Spark</a>.  All
	the major chart types offered by the Google Visualization API
	are supported by Sgvizler.  The user inputs a SPARQL query
	which is sent to a designated SPARQL endpoint. The endpoint
	must return the results back the query results
	in <a href="http://www.w3.org/TR/rdf-sparql-XMLres/">SPARQL
	Query Results XML Format</a>
	or <a href="http://www.w3.org/TR/rdf-sparql-json-res/">SPARQL
	Query Results in JSON format</a>. Sgvizler parses the results
	into the
	JSON <a href="http://code.google.com/apis/chart/interactive/docs/datatables_dataviews.html#javascriptliteral">format
	that Google prefers</a> and displays the chart using the
	Google Visualization API or a <a class="internal"
	href="#userfunctions">custom-made visualization or
	formatting function</a>.
      </p>
      <p>
	Sgvizler is just a small javascript. It needs, in addition to
	the Google Visualization API, the javascript
	framework <a href="http://jquery.com/">jQuery</a> to
	work. Sgvizler has successfully been tested with
	the <a href="http://www.joseki.org">Joseki SPARQL server</a>
	and a few new major web browsers.
      </p>
      <p>
	It is simple to get started! The file
	<a class="internal" href="sgvizler.html">sgvizler.html</a> 
	contains everything you need to setup Sgvizler on your own
	site. For more information see the <a class="internal"
	href="#download">Download</a> section.
      </p>

      <h2><a id="screenshots">Screenshots</a></h2>
      <p>
	For more details on the chart types and on how to create your
	own, see the sections <a class="internal"
	href="#charttypes">Designing Queries</a>
	and <a class="internal" href="#userfunctions">Creating your
	own Chart Function</a>. Click screenshot to get a larger
	version, click image caption to run an example query.
      </p>
      <table class="screenshots">
	<tr>
	  <td><a href="./screenshots/GeoMap.png"><img class="screenshot"
	  src="./screenshots/sGeoMap.png"
	  alt=""/></a><span><a href="#" class="hashtarget"
	  onclick="sgvizler.example.run(sgvizler.example.query05a,
	  'chart=gGeoMap');">Geo Map</a></span></td>
	  <td><a href="./screenshots/LineChart.png"><img class="screenshot"
	  src="./screenshots/sLineChart.png"
	  alt=""/></a><span> <a href="#" class="hashtarget"
	  onclick="sgvizler.example.run(sgvizler.example.query01c,
	  'chart=gLineChart');">Line Chart</a></span></td>
	  <td><a href="./screenshots/Map.png"><img class="screenshot"
	  src="./screenshots/sMap.png" alt=""/></a><span><a href="#"
	  class="hashtarget"
	  onclick="sgvizler.example.run(sgvizler.example.query11a,
	  'chart=gMap');">Map</a></span></td>
	</tr><tr>
	  <td><a href="./screenshots/MotionChart.png"><img class="screenshot"
	  src="./screenshots/sMotionChart.png"
	  alt=""/></a><span><a href="#" class="hashtarget"
	  onclick="sgvizler.example.run(sgvizler.example.query06b,
	  'chart=gMotionChart');">Motion Chart</a></span></td>
	  <td><a href="./screenshots/OrgChart.png"><img class="screenshot"
	  src="./screenshots/sOrgChart.png"
	  alt=""/></a><span><a href="#" class="hashtarget"
	  onclick="sgvizler.example.run(sgvizler.example.query07b,'chart=gOrgChart');">Org
	  Chart</a></span></td>
	  <td><a href="./screenshots/PieChart.png"><img class="screenshot"
	  src="./screenshots/sPieChart.png"
	  alt=""/></a><span><a href="#" class="hashtarget"
	  onclick="sgvizler.example.run(sgvizler.example.query03b,
	  'chart=gPieChart');">Pie Chart</a></span></td>
	</tr><tr>
	  <td><a href="./screenshots/ScatterChart.png"><img class="screenshot"
	  src="./screenshots/sScatterChart.png"
	  alt=""/></a><span><a href="#" class="hashtarget"
	  onclick="sgvizler.example.run(sgvizler.example.query02b,
	  'chart=gScatterChart');">Scatter Chart</a></span></td>
	  <td><a href="./screenshots/Timeline.png"><img class="screenshot"
	  src="./screenshots/sTimeline.png"
	  alt=""/></a><span><a href="#" class="hashtarget"
	  onclick="sgvizler.example.run(sgvizler.example.query08a,
	  'chart=gTimeline');">Timeline</a></span></td>
	  <td><a href="./screenshots/TreeMap.png"><img class="screenshot"
	  src="./screenshots/sTreeMap.png"
	  alt=""/></a><span><a href="#" class="hashtarget"
	  onclick="sgvizler.example.run(sgvizler.example.query07a,'chart=gTreeMap');">Tree
	  Map</a></span></td>
	</tr>
      </table>

      <h2>Using Sgvizler</h2>
      <p>
	There are two intended ways to use Sgvizler. The first is to
	setup a query form webpage where users can write and execute
	their own queries and view the results formatted as different
	types of charts and maps. The second it to write queries and
	store them in <code>&lt;div&gt;</code> elements using
	attributes Sgvizler recognises. These queries are read and
	executed on page load and the results are displayed in the
	same <code>&lt;div&gt;</code> element.
      </p>

      <h3>Query Form</h3>
      <p>
	This form closely resembles the query forms
	of <a href="http://www.sparql.org/query.html">SPARQLer</a>
	and <a href="http://dbpedia.org/snorql/">Snorql</a>. Write the
	query in the textarea, including necessary namespace
	declarations. In addition, it is possible to select different
	chart types in a drop-down menu and to specify the size of the
	resulting chart. The query result set format must fit the
	chosen chart type. More details are given in the
	section <a class="internal" href="#designingqueries">Designing
	Queries</a> below.
      </p>
      
      <h3>Query stored in <code>&lt;div&gt;</code></h3>
      <p>
	Add <code>&lt;div&gt;</code> elements of the following format:
      </p>
      <pre>
     &lt;div id="sgvzl_example1"
          data-sgvizler-endpoint="http://sws.ifi.uio.no/sparql/npd"
          data-sgvizler-query="SELECT ?class (count(?instance) AS ?noOfInstances)
                               WHERE{ ?instance a ?class }
		               GROUP BY ?class
		               ORDER BY ?class"
          data-sgvizler-chart="PieChart"
          data-sgvizler-loglevel="0"
          data-sgvizler-chart-options="is3D=true|title=Number of instances"
          style="width:800px; height:400px;"
          &gt;&lt;/div&gt;
      </pre>
      <p>Explanation of attributes:</p>
      <dl>
	<dt><code>id</code></dt>
	<dd>
	  Required. The identifier for the &lt;div&gt;
	  element. Necessary for Sgvizler to locate here to put the
	  chart. The value must be unique all elements on the same
	  page.
	</dd>
	<dt><code>data-sgvizler-endpoint</code></dt>
	<dd>URL to SPARQL endpoint. <i>This has not been thoroughly
	tested, so it might not work on all browsers and on all
	endpoints.</i>
	</dd>
	<dt><code>data-sgvizler-query</code></dt>
	<dd>
	  The SPARQL SELECT query specifying a query result to fit the
	  chosen diagram. More details are given in the
	  section <a class="internal"
	  href="#designingqueries">Designing Queries</a> below.
	</dd>
	<dt><code>data-sgvizler-chart</code></dt>
	<dd>The chart type to draw. Possible values are found in the
	id column in the <a class="internal" href="#charttypes">table
	of available chart types</a>. Default value is gLineChart.
	</dd>
	<dt><code>data-sgvizler-loglevel</code></dt>
	<dd>To what extent Sgvizler shall give feedback to the
	user. Possible values are 0, 1 or 2:
	  <dl>
	    <dt>0</dt>
	    <dd>0 means no feedback. If all is well, i.e. you have
	      connection to your endpoint, the query is in the correct
	      format and so on, then the chart is displayed. If not,
	      then no error message is printed on the page.
	    </dd>
	    <dt>1</dt>
	    <dd>
	      1 means some feedback. The <code>&lt;div&gt;</code>
	      element will read <i>Loading...</i> until the chart is
	      displayed, and <i>Error.</i> if an error is caught.
	    </dd>
	    <dt>2</dt>
	    <dd>
	      2 means "full" feedback. The same amount is as given when
	      using the query form is printed in
	      the <code>&lt;div&gt;</code> element, except the final
	      message since this is overwritten by the chart.
	    </dd>
	  </dl>
	  The default value is 2.
	</dd>
	<dt><code>data-sgvizler-chart-options</code></dt>
	<dd>List of options which are sent to the <code>draw()</code>
	function of the given chart type. Each option is given
	as <code>option=value</code> and each option-value-pair is
	separated with a vertical bar,
	e.g. <code>option1=value1|option2=value2</code>. If you are
	using a Google chart type you should consult the page they
	have for that chart type for the available options and
	permissible values. If your using a different chart type, you
	should find options and values on this page and/or in the
	file <a class="internal"
	href="sgvizler.visualization.js">sgvizler.visualization.js</a>.
	</dd>  
	<dt><code>style</code></dt>
	<dd>
	  This is just the normal way of adding css style to your
	  elements, but <code>width</code> and <code>height</code>
	  will also be picked up by Sgvizler to determine the size of
	  the chart. The default values are respectively 800px and
	  400px.
	</dd>
      </dl>

      <p>
	(This use case of Sgvizler is inspired
	by <a href="http://km.aifb.kit.edu/sites/spark/">Spark</a>,
	which I discovered after the first version of Sgvizler.)
      </p>


      <h2><a id="designingqueries">Designing Queries</a></h2>
      <p>
	When designing your SPARQL query for visualization in Sgvizler
	order and the datatypes of the variables in the SELECT block
	is crucial for successful results. If the received data does
	not fit the required format, then, depending on the browser,
	an explanation of why the chart does not appear will be given.
	Sgvizler sets the datatype for each column by looking at just
	the first row of results. Datatypes are decided only on the
	basis of the XSD datatype of the values. xsd:int, xsd:long,
	xsd:integer, xsd:float, xsd:double, xsd:decimal are types as
	"number"; xsd:boolean as "boolean"; xsd:date as "Date" object:
	xsd:dateTime as "Date" object; and xsd:time as "timeofday"
	Array. The rest, especially string, untyped literals and
	resources, are typed as "string".
      </p>
      <p>
	The order of variables decides how the information in the
	diagram is grouped. The first variable becomes the first
	column, and so on. Generally, the first column specifies the
	category in which the other columns are grouped, i.e. the
	first column is the x-axis, and the remaining columns give
	different series on the y-axis. However, there are variations
	between diagram; see below for details.
      </p>
      <p>
	Note that the examples are live, and the dataset is not
	static, so time may effect the results of the queries. Please
	report if the examples are not working.
      </p>
      <p><a name="charttypes">Available chart types</a>:</p>
      <table class="options">
	<tr><th>Name</th><th>Id</th></tr>
	<tr><td><a class="internal" href="#chart1">Line Chart</a></td><td><code>gLineChart</code></td></tr>
	<tr><td><a class="internal" href="#chart1">Area	Chart</a></td><td><code>gAreaChart</code></td></tr>
	<tr><td><a class="internal" href="#chart1">Column Chart</a></td><td><code>gColumnChart</code></td></tr>
	<tr><td><a class="internal" href="#chart1">Bar Chart</a></td><td><code>gBarChart</code></td></tr>
	<tr><td><a class="internal" href="#chart2">Scatter Chart</a></td><td><code>gScatterChart</code></td></tr>
	<tr><td><a class="internal" href="#chart3">Pie Chart</a></td><td><code>gPieChart</code></td></tr>
	<tr><td><a class="internal" href="#chart4">Candlestick Chart</a></td><td><code>gCandlestickChart</code></td></tr>
	<tr><td><a class="internal" href="#chart5">Org Chart</a></td><td><code>gOrgChart</code></td></tr>
	<tr><td><a class="internal" href="#chart6">Tree Map</a></td><td><code>gTreeMap</code></td></tr>
	<tr><td><a class="internal" href="#chart7">Motion Chart</a></td><td><code>gMotionChart</code></td></tr>
	<tr><td><a class="internal" href="#chart8">Timeline</a></td><td><code>gTimeline</code></td></tr>
	<tr><td><a class="internal" href="#chart9">Geo Chart</a></td><td><code>gGeoChart</code></td></tr>
	<tr><td><a class="internal" href="#chart10">Geo Map</a></td><td><code>gGeoMap</code></td></tr>
	<tr><td><a class="internal" href="#chart11">Map</a></td><td><code>gMap</code></td></tr>
	<tr><td><a class="internal" href="#chart12">Map+</a></td><td><code>sMap</code></td></tr>
	<tr><td><a class="internal" href="#chart13">Table</a></td><td><code>gTable</code></td></tr>
	<tr><td><a class="internal" href="#chart14">List</a></td><td><code>sList</code></td></tr>
	<tr><td><a class="internal" href="#chart15">Definition List</a></td><td><code>sDefList</code></td></tr>
	<tr><td><a class="internal" href="#chart16">Text</a></td><td><code>sText</code></td></tr>
      </table>

      <h3><a name="chart1">Line Chart, Area Chart, Column Chart, Bar Chart</a></h3>
      <a href="./screenshots/LineChart.png">
	<img class="screenshot" src="./screenshots/sLineChart.png"
	     alt="Line Chart example"/>
      </a>
      <p>Format: 2&#8211;N columns:</p>
      <ol>
	<li>The category label, i.e. the x-axis. Any datatype(?)</li>
	<li>2nd.&#8211;Nth. column: each column represents a separate
	y-axis series. Datatype: number.</li>
      </ol>
      <p>
	These chart types are very similar and have the same data
	format requirements. Line charts represents the relationship
	between the x-series and each y-series as a line. An area
	chart colors the area below this line. A column chart
	represents the relationship with vertical bars, and bar charts
	using horizontal bars. Scatter charts, shown below, are also
	similar to these chart types.
      </p>
      <p>Examples:</p>
      <ul>
	<li>Total production of oil, gas, natural liquid gas (NGL),
	condensate and water on the Norwegian Continental Shelf
	(NCS) 1972&#8211;2010.<br/>
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query01a,
		    'chart=gLineChart');">Line Chart</a> -
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query01a,
		    'chart=gAreaChart');">Area Chart</a> -
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query01a,
		    'chart=gColumnChart');">Column Chart</a> -
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query01a,
		    'chart=gBarChart');">Bar Chart</a>
	</li>
	<li>Similar chart for the field Ekofisk:<br/>
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query01b,
		    'chart=gLineChart');">Line Chart</a> -
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query01b,
		    'chart=gAreaChart');">Area Chart</a> -
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query01b,
		    'chart=gColumnChart');">Column Chart</a> -
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query01b,
		    'chart=gBarChart');">Bar Chart</a>
	</li>
	<li>Ekofisk again, but this time values for each month:<br/>
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query01c,
		    'chart=gLineChart');">Line Chart</a> -
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query01c,
		    'chart=gAreaChart');">Area Chart</a> -
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query01c,
		    'chart=gColumnChart');">Column Chart</a> -
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query01c,
		    'chart=gBarChart');">Bar Chart</a>
	</li>
	<li>The average number of drilling days for exploration
	wellbores per year (of completion of drilling). Includes
	also the number of such completions per year:<br/>
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query02a,
		    'chart=gLineChart');">Line Chart</a> -
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query02a,
		    'chart=gAreaChart');">Area Chart</a> -
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query02a,
		    'chart=gColumnChart');">Column Chart</a> -
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query02a,
		    'chart=gBarChart');">Bar Chart</a>
	</li>
      </ul>


      <h3><a name="chart2">Scatter Chart</a></h3>
      <a href="./screenshots/ScatterChart.png">
	<img class="screenshot" src="./screenshots/sScatterChart.png"
	     alt="Scatter Chart example"/>
      </a>
      <p>Format: 2&#8211;N columns:
      (<a href="http://code.google.com/apis/chart/interactive/docs/gallery/scatterchart.html#Data_Format">Google's
      description</a>)</p>
      <ol>
	<li>The x-axis. Datatype: number.</li>
	<li>2nd.&#8211;Nth. column: each column represents a separate
	y-axis series. Datatype: number.</li>
      </ol>
      <p>
	Use scatter charts to plot a set of single data instances
	(i.e. not aggregate data) and find trends.
      </p>
      <p>Examples:</p>
      <ul>
	<li>
	  <a href="#" class="hashtarget" 
	     onclick="sgvizler.example.run(sgvizler.example.query02b,
		      'chart=gScatterChart');">The number of drilling days for
	  exploration wellbores per year</a>. The non-aggregated
	  version of the example above. Note that we need to cast
	  years to numbers.
	</li>

	<li>Finding trends in wellbore mud tests. Comparing the depth
	of the test with the values from the test. All charts could
	be combined to one, but since the scale is different that
	not so good, and the amount of data will put a heavy burden
	on your javascript engine. In fact, these queries are limited
	to 200 rows to make them run smoothly:
	<ul>
	  <li>
	    <a href="#" class="hashtarget" 
	       onclick="sgvizler.example.run(sgvizler.example.query04a,
			'chart=gScatterChart');">Compare test depth
	    to viscosity</a>.
	  </li>
	  <li>
	    <a href="#" class="hashtarget" 
	       onclick="sgvizler.example.run(sgvizler.example.query04a,
			'chart=gScatterChart');">Compare test depth
	    to weight</a>.
	  </li>
	  <li>
	    <a href="#" class="hashtarget" 
	       onclick="sgvizler.example.run(sgvizler.example.query04a,
			'chart=gScatterChart');">Compare test depth
	    to yield point</a>.
	  </li>
	</ul>
	</li>
      </ul>
      <h3><a name="chart3">Pie Chart</a></h3>
      <a href="./screenshots/PieChart.png">
	<img class="screenshot" src="./screenshots/sPieChart.png"
	     alt="Pie Chart example"/>
      </a>
      <p>Format: 2 columns:
      (<a href="http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html#Data_Format">Google's
      description</a>)</p>
      <ol>
	<li>The pie slice label. Datatype: any?</li>
	<li>The pie slice value. Datatype: number.</li>
      </ol>
      <p>Examples (including other chart types for comparison):</p>
      <ul>
	<li>Which companies are field operators? All fields.<br/>
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query03a,
		    'chart=gPieChart');">Pie Chart</a> -
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query03a,
		    'chart=gColumnChart');">Column Chart</a> -
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query03a,
		    'chart=gBarChart');">Bar Chart</a>
	</li>
	<li>Which companies are field operators? Only producing
	fields.<br/>
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query03b,
		    'chart=gPieChart');">Pie Chart</a> -
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query03b,
		    'chart=gColumnChart');">Column Chart</a> -
	<a href="#" class="hashtarget" 
	   onclick="sgvizler.example.run(sgvizler.example.query03b,
		    'chart=gBarChart');">Bar Chart</a>
	</li>
      </ul>

      <h3><a name="chart4">Candlestick Chart</a></h3>
      <p>
	There is no example of the this chart type yet. See the
	<a href="http://code.google.com/apis/chart/interactive/docs/gallery/candlestickchart.html#Data_Format">description
	at Google</a> for the data format description and an
	example.
      </p>

      <h3><a name="chart5">Org Chart</a></h3>
      <a href="./screenshots/OrgChart.png">
	<img class="screenshot" src="./screenshots/sOrgChart.png"
	     alt="Org Chart example"/>
      </a>
      <p>Format: 1&#8211;3 columns:
      (<a href="http://code.google.com/apis/chart/interactive/docs/gallery/orgchart.html#Data_Format">Google's
      description</a>)</p>
      <ol>
	<li>ID of node. Datatype: any.</li>
	<li>ID of parent. Datatype: any.</li>
	<li>Tool-tip text to show, when a user hovers over this
	node.</li>
      </ol>
      <p>Draws trees representing the the child-parent relation. See
      also Tree Map if you want to represent values of your node,
      and draw a box and not trees.</p>
      <p>Examples:</p>
      <ul>
	<li>
	  <a href="#" class="hashtarget" 
	     onclick="sgvizler.example.run(sgvizler.example.query07b,
		      'chart=gOrgChart');"> Draw the structure all
	    Company -> Field -> Exploration Wellbore</a>.
	</li>
      </ul>

      <h3><a name="chart6">Tree Map</a></h3>
      <a href="./screenshots/TreeMap.png">
	<img class="screenshot" src="./screenshots/sTreeMap.png"
	     alt="Tree Map example"/>
      </a>
      <p>Format: 3&#8211;4 columns:
      (<a href="http://code.google.com/apis/chart/interactive/docs/gallery/treemap.html#Data_Format">Google's
      description</a>)</p>
      <ol>
	<li>ID of node. Datatype: string.</li>
	<li>ID of parent. Datatype: string.</li>
	<li>A value which determines the size of the node. Datatype:
	number, must be positive.</li>
	<li>A value which determines the color of the node. Datatype:
	number.</li>
      </ol>
      <p>
	Draws a tree structure as a partitioned box. The size of the
	box is determined by the value of the third argument. The
	color of the box of the fourth argument. Only the values of
	child nodes matter. Parents get the value of their
	children. Zoom in with left-clicks, out with right-clicks. See
	Org Chart if you want trees and not boxes.
      </p>
      <p>Examples:</p>
      <ul>
	<li>
	  <a href="#" class="hashtarget"  onclick="sgvizler.example.run(sgvizler.example.query07a,
			       'chart=gTreeMap');"> Draws the structure
	  Company -> Field -> Exploration Wellbore</a>. Boxsizes are
	  determined by the numberOfDrilling days of the wellbores.
	</li>
      </ul>

      <h3><a name="chart7">Motion Chart</a></h3>
      <a href="./screenshots/MotionChart.png">
	<img class="screenshot" src="./screenshots/sMotionChart.png"
	     alt="Motion Chart example"/>
      </a>
      <p>Format: 3&#8211;N columns:
      (<a href="http://code.google.com/apis/chart/interactive/docs/gallery/treemap.html#Data_Format">Google's
      description</a>)</p>
      <ol>
	<li>ID of the thing. Datatype: string.</li>
	<li>Timestamp for value. Datatype: different time formats, see
	Google's page.</li>
	<li>3rd&#8211;Nth. column: Values. Datatype: string or
	number.</li>
      </ol>
      <p>
	A complex chart type with animation and contains many
	different charts in one. Shows values for things over
	time. Value series can be turned on or off. Sometimes series
	switch places.
      </p>
      <p>Examples:</p>
      <ul>
	<li>
	  <a href="#" class="hashtarget" 
	     onclick="sgvizler.example.run(sgvizler.example.query06b,
		      'chart=gMotionChart');">Produced oil, gas per year per field on the
	  Norwegian Continental Shelf</a>.
	</li>
	<li>
	  <a href="#" class="hashtarget" 
	     onclick="sgvizler.example.run(sgvizler.example.query06a,
		      'chart=gMotionChart');">Produced oil, gas, NGL and water per year
	  on the Norwegian Continental Shelf.</a> Does not work
	  so well in scatter chart mode.
	</li>
      </ul>

      <h3><a name="chart8">Timeline</a></h3>
      <a href="./screenshots/Timeline.png">
	<img class="screenshot" src="./screenshots/sTimeline.png"
	     alt="Timeline example"/>
      </a>
      <p>
	Draws an interactive diagram with dates or timestamps on the
	x-axis and the y-axis series as line diagrams. Can scroll back
	and forth in time and zoom in time. Somewhat difficult
	data format,
	see <a href="http://code.google.com/apis/chart/interactive/docs/gallery/annotatedtimeline.html#Data_Format">Google's
	description</a> for a description. Drawn using Flash. Requires
	that the size of the html container element is explicitly set,
	which may not be the case for the site where the example runs
	on.
      </p>

      <p>Examples:</p>
      <ul>
	<li>
	  <a href="#" class="hashtarget" 
	     onclick="sgvizler.example.run(sgvizler.example.query08a,
		      'chart=gTimeline');">Production of oil and gas per month at
	  Ekofisk</a>.
	</li>
      </ul>

      <h3><a name="chart9">Geo Chart</a></h3>
      <p>Not tested. I have no good data for this in my dataset, so
      see <a href="http://code.google.com/apis/chart/interactive/docs/gallery/geochart.html">Google's
      description</a> for more information.</p>

      <h3><a name="chart10">Geo Map</a></h3>
      <a href="./screenshots/GeoMap.png">
	<img class="screenshot" src="./screenshots/sGeoMap.png"
	     alt="Geo Map example"/>
      </a>
      <p>Format: 2&#8211;4 columns:
      (<a href="http://code.google.com/apis/chart/interactive/docs/gallery/geomap.html#Data_Format">Google's
      description</a>)</p>
      <ol>
	<li>Latitude. Datatype: number.</li>
	<li>Longitude. Datatype: number.</li>
	<li>Value to display at the given position. Datatype:
	number.</li>
	<li>Label for the position. Datatype: string.</li>
      </ol>
      <p>
	Draws a map and lays out the values of the 3rd column as
	circles of size and color according to the size of the
	value. This chart offers little zooming and panning options,
	and are not at all implemented by Sgvizler. Also the map
	region available for the dataset is not a good match as my
	things are in the middle of the sea outside of Norway; the map
	for Norway is too small and the map of Northern Europe is too
	big. Which is sad because this could make a great chart
	type. Also there seems to be no easy way to change the color
	of the map; on the screenshot it looks like Mr. Sgvizler has
	been sunburned, but its only me who has turned up the contrast.
      </p>
      <p>Examples:</p>
      <ul>
	<li>
	  <a href="#" class="hashtarget" 
	     onclick="sgvizler.example.run(sgvizler.example.query05a,
		      'chart=gGeoMap');">Some random things with a lat, long and
	  totalDepth</a>, which would be the depth of the wellbore.
	</li>
      </ul>

      <h3><a name="chart11">Map</a></h3>
      <a href="./screenshots/Map.png">
	<img class="screenshot" src="./screenshots/sMap.png" alt="Map example"/>
      </a>
      <p>Format: 1&#8211;3 columns, the two first columns specify a
      geographical point, the optional third a name for the point.
      (See <a href="http://code.google.com/apis/chart/interactive/docs/gallery/map.html#Data_Format">Google's
      description</a> for details.) See also the chart type Map+
      below.</p>
      <p>Displays markers on a Google Map. Max. 400 markers.</p>
      <p>Examples:</p>
      <ul>
	<li> 
	  <a href="#" class="hashtarget" 
	     onclick="sgvizler.example.run(sgvizler.example.query09a,
		      'chart=gMap');">Plot all fixed facilities</a>.
	</li>
	<li>
	  <a href="#" class="hashtarget" 
	     onclick="sgvizler.example.run(sgvizler.example.query10a,
		      'chart=gMap');">Plot the development wellbores of Frigg</a>.
	</li>
	<li>
	  <a href="#" class="hashtarget" 
	     onclick="sgvizler.example.run(sgvizler.example.query11a,
		      'chart=gMap');">Plot everything north of 72.5 degrees
	  north</a>.
	</li>
      </ul>

      <h3><a name="chart12">Map+</a></h3>
      <a href="./screenshots/Map+.png">
	<img class="screenshot" src="./screenshots/sMap+.png"
	     alt="Map+ example"/>
      </a>
      <p>This is a custom-made function which produces nicely
      formatted html boxes to place on the markers of a Google Map
      Chart. If there are less than four columns this chart behaves
      just like Map. All options are passed through to Google's Map
      Chart, so Map+ takes all options Map takes, except Map+ operates
      only in <code>dataMode=markers</code> mode.
      </p>
      <p>Format 2&#8211;6 columns:</p>
      <ol>
	<li>Latitude. Datatype: number.</li>
	<li>Longitude. Datatype: number.</li>
	<li>Heading. Datatype: any.</li>
	<li>Paragraph text. Datatype: any.</li>
	<li>Link. Datatype: any, but should be a URL.</li>
	<li>Image. Datatype: any, by should be a link to a small
	image.</li>
      </ol>

      <h3><a name="chart13">Table</a></h3>
      <p>This is a good old table with all the results returned by the
      query, formatted to a table by Google's functions. Rows can be
      sorted by clicking on columns.
      (<a href="http://code.google.com/apis/chart/interactive/docs/gallery/table.html#Data_Format">Google's
      description</a>).</p>


      <h3><a name="chart14">List</a></h3>
      <p>This is a custom-made function which produces a simple html
      list. It can be either numbered or bulleted. 
      </p>
      <p>Format is any number of columns. All columns are treated as text.</p>
      <table class="options">
	<tr><th>Name</th><th>Default</th><th>Description</th></tr>
	<tr>
	  <td><code>list</code></td>
	  <td><code>ul</code></td>
	  <td>Specifies the listtype, should be either <code>ul</code>
	  (unordered/bulleted) or <code>ol</code>
	  (ordered/numbered).</td>
	</tr>
	<tr>
	  <td><code>cellSep</code></td>
	  <td><code>, </code></td>
	  <td>The glue between cells in each row. Can be html.</td>
	</tr>
	<tr>
	  <td><code>rowPrefix</code></td>
	  <td><nobr><code></code> (empty string)<nobr></td>
	  <td>String to prefix each row with. Can be html.</td>
	</tr>
	<tr>
	  <td><code>rowPostfix</code></td>
	  <td><code></code> (empty string)</td>
	  <td>String to postfix each row with. Can be html.</td>
	</tr>
      </table>

      <h3><a name="chart15">Definition List</a></h3>
      <p>Similar to List, but creates a html definition list.
      </p>
      <p>Format two or more columns. All columns are treated as
      text. First column contains the terms to be defined, the rest
      contains the definition.</p>
      <table class="options">
	<tr><th>Name</th><th>Default</th><th>Description</th></tr>
	<tr>
	  <td><code>cellSep</code></td>
	  <td><code>, </code></td>
	  <td>The glue between cells in each row. Can be html.</td>
	</tr>
	<tr>
	  <td><code>termPrefix</code></td>
	  <td><nobr><code></code> (empty string)<nobr></td>
	  <td>String to prefix each term with. Can be html.</td>
	</tr>
	<tr>
	  <td><code>termPostfix</code></td>
	  <td><code>:</code></td>
	  <td>String to postfix each row with. Can be html.</td>
	</tr>
	<tr>
	  <td><code>definitionPrefix</code></td>
	  <td><nobr><code></code> (empty string)<nobr></td>
	  <td>String to prefix each definition with. Can be html.</td>
	</tr>
	<tr>
	  <td><code>definitionPostfix</code></td>
	  <td><code></code> (empty string)</td>
	  <td>String to postfix each definition with. Can be html.</td>
	</tr>
      </table>


      <h3><a name="chart16">Text</a></h3>
      <p>A generic text producer.</p>
      <p>Any number of columns. The default treats the results as a
      block of text, each cell is a sequence of words, each row a
      paragraph.</p>
      <table class="options">
	<tr><th>Name</th><th>Default</th><th>Description</th></tr>
	<tr>
	  <td><code>cellSep</code></td>
	  <td><code>, </code></td>
	  <td>The glue between cells in each row. Can be html.</td>
	</tr>
	<tr>
	  <td><code>cellPrefix</code></td>
	  <td><nobr><code></code> (empty string)<nobr></td>
	  <td>String to prefix each cell with. Can be html.</td>
	</tr>
	<tr>
	  <td><code>cellPostfix</code></td>
	  <td><code></code> (empty string)</td>
	  <td>String to postfix each cell with. Can be html.</td>
	</tr>
	<tr>
	  <td><code>rowPrefix</code></td>
	  <td><nobr><code>&lt;p&gt;</code><nobr></td>
	  <td>String to prefix each row with. Can be html.</td>
	</tr>
	<tr>
	  <td><code>rowPostfix</code></td>
	  <td><code>&lt;/p&gt;</code></td>
	  <td>String to postfix each row with. Can be html.</td>
	</tr>
	<tr>
	  <td><code>resultsPrefix</code></td>
	  <td><nobr><code>&lt;div&gt;</code><nobr></td>
	  <td>String to prefix the whole results with. Can be html.</td>
	</tr>
	<tr>
	  <td><code>resultsPostfix</code></td>
	  <td><code>&lt;/div&gt;</code></td>
	  <td>String to postfix the whole results with. Can be html.</td>
	</tr>
      </table>


      <h2><a name="userfunctions">Creating your own Chart Function</a></h2>
      <p>
	This is possible to create your own functions to visualize or
	format (or do something else? to) the query results. The
	function constructor takes one argument: the html element to
	which the function should use to fill the query results
	with. The function's prototype object must have three
	values: <code>id</code>, <code>name</code> and a
	function <code>draw(data, chartOpt)</code>. The value
	of <code>id</code> uniqely identifies the charttype (Google
	chart type ids are prefixed with 'g'. I prefix mine with
	's'.). The value of <code>name</code> is a human readable
	sting which is used in lists (and on this page). 
      </p>
      <p>
	The function <code>draw(data, chartOpt)</code> does all the
	work. The argument <code>data</code> is
	a <a href="http://code.google.com/apis/chart/interactive/docs/reference.html#DataTable">google.visualization.DataTable</a>
	containing the query results. The object has many functions to
	manipulate the table and get/put values, e.g. you can get
	its <a href="http://code.google.com/apis/chart/interactive/docs/reference.html#dataparam">JSON
	representation</a> using DataTable.toJSON(), see the links to
	Google for more information. The
	argument <code>chartOpt</code> is an object containing the
	option-value-pairs specified by the user,
	e.g. <code>dataMode=markers</code> of the chart type Map.

	Your function must be placed in
	<code>sgvizler.vizualization</code> in order to be discovered
	by Sgvizler.  </p> <p>Example. Below is the List chart type
	function, it is found in the file <a class="internal"
	href="sgvizler.visualization.js">sgvizler.visualization.js</a>,
	but it could have been located as this elsewhere, in your own
	javascript file or in a script element on your html page. The
	first line contains the constructor, the following lines the
	prototype object.  <pre> sgvizler.visualization.List =
	function(container) {this.container = container};
	sgvizler.visualization.List.prototype = { id: "sList", name:
	"List", draw: function(data, chartOpt) { var noColumns =
	data.getNumberOfColumns(), noRows = data.getNumberOfRows(),

            // Build options, overwrite defaults with any user options
	    opt = $.extend({ list: 'ul', cellSep: ', ', rowPrefix: '', rowPostfix: '' }, chartOpt ),
	    list = $(document.createElement(opt.list));

	for(var r = 0; r < noRows; r++){
	    var rowtext = opt.rowPrefix;
	    for(var c = 0; c < noColumns; c++){
		rowtext += data.getValue(r,c); 
		    if(c+1 != noColumns){
			rowtext += opt.cellSep; }}
	    rowtext += opt.rowPostfix;
	    list.append($(document.createElement('li')).html(rowtext));
	}
	$(this.container).empty();      // Clear existing elements from container.
	$(this.container).append(list); // Add list to container.
    }
};
</pre>

      <h2>Links</h2>
      <p>Links to other folks who do something similar as Sgvizler:</p>
      <ul>
	<li><a href="http://www.jenitennison.com/blog/node/113">Jeni
	Tennison</a> describes how to convert the SPARQL XML results
	with XSLT to the format that the Google
	Visualization <i>Query</i> object is able to read.</li>
	<li><a href="http://data-gov.tw.rpi.edu/wiki/How_to_render_SPARQL_results_using_Google_Visualization_API">The
	Data-gov Wiki</a> seems to use exactly this (i.e. the bullet
	above) approach.</li>
	<li><a href="http://km.aifb.kit.edu/sites/spark/">Spark</a>
	"is a JavaScript library that allows the simple integration of
	data from all over the Web in any HTML page, using a rich set
	of visualisations."
	</li>
      </ul>

      <h2><a id="download">Download</a></h2>
      <p>
	To get Sgvizler, get the file <span style="display:block;
	padding: 10px 0px 10px 40px;"><a class="internal"
	href="sgvizler.html">sgvizler.html</a></span> which is a
	bare-bones html file with hotlinks to all the necessary
	javascripts; it links to the latest version of
	Sgvizler. Download this file to your server, change a few
	variables in this file, and you should be up and running. You
	can choose to download all the linked javascripts or you can
	stay "hotlinked". The file <a class="internal"
	href="sgvizler.js">sgvizler.js</a> is always the latest
	version of Sgvizler, but <a class="internal"
	href="./releases/">all releases are available</a>.
      </p>
      <p>
	Configuration is done by setting the variables in the
	javascript element in the html file, see below. The most
	important variable is <code>endpoint</code>. (Defaults are set
	in the javascript file, so this file should work without any
	changes, allthough it will not query the endpoint you probably
	want.) Settings are overwritten in the sequence you would
	expect: Settings in the html script element overwrites the
	defaults in the javascript file, and settings in an html
	element, e.g. by using <code>data-sgvizler-chart-type</code>
	overwrites the global settings (only for the given element,
	that is).
      </p>
      <pre>
    &lt;script type="text/javascript"&gt;

      /* CONFIGURATION: Set variables to fit your setup.  
       * NB! Do not let the last item in a list end with a comma. IE might break. */

      //// Query settings. The defaults settings are listed.
      sgvizler.queryOptions = {
	/* Default query. */
      	//'query':                  "SELECT ?class (count(?instance) AS ?noOfInstances)\nWHERE{ ?instance a ?class }\nGROUP BY ?class\nORDER BY ?class",

	/* Endpoint URL. */
	//'endpoint':               "http://sws.ifi.uio.no/sparql/npd",

	/* Endpoint output format. */
        //'endpointOutput':         'xml',  /* only 'xml' or 'json' is supported */

	/* This string is appended the 'endpoint' variable and the query to it again to give a link to the "raw" query results.
        //'endpointQueryURL':       "?output=text&amp;query=",

	/* URL to SPARQL validation service. The query is appended to it. */
        //'validatorQueryURL':      "http://www.sparql.org/query-validator?languageSyntax=SPARQL&amp;outputFormat=sparql&amp;linenumbers=true&amp;query=",

	/* Default chart type. */
        //'chart':                  'gLineChart',

	/* Default log level. Must be either 0, 1, or 2. */
        //'loglevel':               2
      };

      //// Prefixes
      /* Add convenient prefixes for your dataset. rdf, rdfs, xsd, owl are already set.  Examples: */
      sgvizler.namespaces['npdv'] = 'http://sws.ifi.uio.no/vocab/npd#';
      sgvizler.namespaces['my'] = 'http://example.org/myProject#';

      //// Your chart drawing preferences. The defaults are listed.
      /* See the Google visualization API for available options for Google charts, and the Sgvizler homepage for other
       * options. Options applicable to all charts are put in the "root" of sgvizler.chartOptions. Chart specific options are
       * put in a "child" with the chart's id as name, e.g. 'gGeoMap'. */
      sgvizler.chartOptions = {
	/*  
	'width':           '800',
	'height':          '400',
	'chartArea':       { left: '5%', top: '5%', width: '75%', height: '80%' },
	     'gGeoMap': {
		 'dataMode':           'markers'
	     },
	     'gMap': {
		 'dataMode':           'markers',
	     },
	     'sMap': {
		 'dataMode':           'markers',
		 'showTip':            true,
		 'useMapTypeControl':  true
	     }
	 */
      };
      
      //// Leave this as is. Ready, steady, go!
      $(document).ready(sgvizler.go());
    &lt;/script&gt;
      </pre>
      <p>
	
      <p>
	Due to
	the <a href="http://en.wikipedia.org/wiki/Same_origin_policy">same
	origin policy</a> of javascript Sgvizler works best located on
	the same domain and port as the endpoint it gets its data
	from. It does work in many cases, however, not all, more
	investigation is needed. A workaround is to setup a proxy for
	your endpoint; php seems to be a popular language for this.
      </p>
      <p>
	<i>License</i>. Sgvizler is freely distributable under the
	terms of an MIT-style <a href="LICENSE">license</a>. Sgvizler
	is just a small javascript. It uses the javascript
	framework <a href="http://jquery.com/">jQuery</a>, which is
	available under a MIT license, see their websites for details.
      </p>
      <p>
	<i>Issues</i>. This is a young project, so bug reports,
	enhancement requests and so on, will be handled manually for
	the time being. Send me an e-mail if there is something
	missing from <a class="internal" href="issues.html">the list
	of issues</a>.
      </p>

      <h2>Log</h2>
      <dl>
	<dt>Version 0.3.1</dt>
	<dd>
	  <ul>
	    <li>Bugfix. Did not handle queries with OPTIONALs.</li>
	    <li>Improved formatting of Map+ charts.</li>
	  </ul>
	</dd>
	<dt>Version 0.3.0</dt>
	<dd>
	  <ul>
	    <li>"More" support for endpoint on different origin. Works
	    now with IE 8?</li>
	    <li>Support for user-defined chart functions.</li>
	    <li>Added two user functions: Map+ and List.</li>
	    <li><i>Update</i>: two more functions: Definition List and Text.</li>
	    <li>Restructured code, so many function names and settings
	    have
	    changed.</li>
	  </ul>
	</dd>
	<dt>Version 0.2.2</dt>
	<dd>
	  <ul>
	    <li>Support for SPARQL results in XML format added.</li>
	    <li>Fixing bug when drawing GeoMap and Map.</li>
	  </ul>
	</dd>
	<dt>Version 0.2.1</dt>
	<dd>
	  <ul>
	    <li>Fixing bug in JSON parser.</li>
	    <li>Namespaces are replaced with their prefix when data is
	    displayed.</li>
	  </ul>
	</dd>
	<dt>Version 0.2.0</dt>
	<dd>
	  <ul>
	    <li>Introducing the possibility of
	    using <code>&lt;div&gt;</code>.</li>
	    <li>Adding table type "chart", which makes sense to use
	      with the <code>&lt;div&gt;</code>-way.
	    </li>
	    <li>Replacing use of the prototype javascript framework
	      with jQuery.</li>
	    <li>Using slightly more involved element ids to not step
	    on toes.</li>
	  </ul>
	</dd>
	<dt>Version 0.1.0</dt>
	<dd>First release. Draws all of Google's major chart
	types. Supports only JSON.</dd>
      </dl>

      <h2><a id="contact">Contact</a></h2>
      <p>
	Please leave me a note if you use Sgvizler. Any feedback is welcome!
      </p>
      <p>
	Contact: <a href="http://folk.uio.no/martige/">Martin
	G. Skj&#230;veland</a>: <code>martige@ifi.uio.no</code>.
      </p>
    </div>
  </body>
</html>
